<%@page import="com.malamute.system.entity.TreeNode"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="java.util.*,com.malamute.system.entity.*"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="/WEB-INF/tag/fn.tld" prefix="fn"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<link href="${pageContext.request.contextPath}/pages/admin/css/main.css"
	rel="stylesheet" type="text/css" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugin/JQuery zTree v3.1/css/zTreeStyle/zTreeStyle.css"
	type="text/css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/plugin/JQuery zTree v3.1/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/plugin/JQuery zTree v3.1/js/jquery.ztree.core-3.1.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/plugin/JQuery zTree v3.1/js/jquery.ztree.exedit-3.1.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/plugin/JQuery zTree v3.1/js/jquery.ztree.excheck-3.1.js"></script>

<!--修改 -->
<s:url action="treenode!form" namespace="/system" var="treeNodeFormLink">
</s:url>

<!--查看 -->
<s:url action="treenode!view" namespace="/system" var="treeNodeViewLink">
</s:url>

<!--Tree ajax -->
<s:url action="tree!listTreeAjax" namespace="/system" var="treeAjaxLink">
</s:url>

<SCRIPT type="text/javascript">
  <!--
	var zTree;
	var setting = {
		view: {
			addHoverDom: addHoverDom,
			removeHoverDom: removeHoverDom,
			dblClickExpand: false,
			showLine: true,
			selectedMulti: false,
			expandSpeed: ($.browser.msie && parseInt($.browser.version)<=6)?"":"fast"
		},	
		edit: {
			//enable: true//属性增加就会出现按钮
			},
		data: {
			simpleData: {
				enable:true,
				idKey: "id",
				pIdKey: "pId",
				rootPId: ""
			}
		},
		callback: {
			onClick: function(event, treeId, treeNode, clickFlag) {
				alert("onClick")
				var zTree = $.fn.zTree.getZTreeObj("tree");
				if(!zTree.isParent){
					zTree.expandNode(treeNode);
				}
			}
		}
	};  
	var newCount = 1;
	//新增按钮
	
	function addHoverDom(treeId, treeNode) {
		//alert("addHoverDom")
		var sObj = $("#" + treeNode.tId + "_span");
		if ($("#editBtn_"+treeNode.id).length>0|| $("#addBtn_"+treeNode.id).length>0) return;
		var addStr = "<button type='button' class='add' id='addBtn_" + treeNode.id
			+ "' title='add node' onfocus='this.blur();'></button>";
		var editStr="<button type='button' class='edit' id='editBtn_" + treeNode.id
			+ "' title='edit node' onfocus='this.blur();'></button>";	
		var removeStr="<button type='button' class='remove' id='removeBtn_" + treeNode.id
			+ "' title='edit node' onfocus='this.blur();'></button>";
		//alert(treeNode.leaf)
		if(treeNode.leaf){
			//叶，可以修改，删除不能新增
			sObj.append(editStr);
			sObj.append(removeStr);
		}else{
			//枝，可以新增，修改
			//当有子的时候不能删除
			sObj.append(addStr);
			sObj.append(editStr);
			if(!treeNode.isParent){
				sObj.append(removeStr);
			}
		}
		var add_btn = $("#addBtn_"+treeNode.id);
		if (add_btn) add_btn.bind("click", function(){
			alert("add");
			$("#treeNodeFrame").attr("src",'${treeNodeFormLink}'+'?belongTo.id='+treeNode.id);
			return false;
		});
		var edit_btn=$("#editBtn_"+treeNode.id);
		if(edit_btn){
			edit_btn.bind("click",function(){
				$("#treeNodeFrame").attr("src",'${treeNodeFormLink}'+'?treeNode.id='+treeNode.id);
				return false;
			});
		}
		var remove_btn=$("#removeBtn_"+treeNode.id);
		if(remove_btn){
			remove_btn.bind("click",function(){
				if(confirm("Do you want to remove?")){
					alert("remove");
				}
				return false;
			});
		}
	};
	function removeHoverDom(treeId, treeNode) {
		if($("#addBtn_"+treeNode.id)){
			$("#addBtn_"+treeNode.id).unbind().remove();
		}
		if($("#editBtn_"+treeNode.id)){
			$("#editBtn_"+treeNode.id).unbind().remove();
		}
		if($("#removeBtn_"+treeNode.id)){
			$("#removeBtn_"+treeNode.id).unbind().remove();
		}
	};
	
	
	
	//全局加按钮方法
	function setEdit() {
		var zTree = $.fn.zTree.getZTreeObj("tree"),
		//checkbox 选中状态
		remove = $("#remove").attr("checked"),
		rename = $("#rename").attr("checked"),
		removeTitle = $.trim($("#removeTitle").get(0).value),
		renameTitle = $.trim($("#renameTitle").get(0).value);
		
		zTree.setting.edit.showRemoveBtn = remove;
		zTree.setting.edit.showRenameBtn = rename;
		zTree.setting.edit.removeTitle = removeTitle;
		zTree.setting.edit.renameTitle = renameTitle;
		showCode(['setting.edit.showRemoveBtn = ' + remove, 'setting.edit.showRenameBtn = ' + rename,
			'setting.edit.removeTitle = "' + removeTitle +'"', 'setting.edit.renameTitle = "' + renameTitle + '"']);
	}
	
	function showCode(str) {
		var code = $("#code");
		code.empty();
		for (var i=0, l=str.length; i<l; i++) {
			code.append("<li>"+str[i]+"</li>");
		}
	}
	
	var zNodes =new Array();
	<s:iterator value="treeNodes">
		zNodes.push({id:<s:property value="id"/>, pId:<s:property value="belongTo==null?-1:belongTo.id"/>, name:'<s:property value="text" escape="false"/>', open:<s:property value="open" escape="false"/>,leaf:<s:property value="leaf" escape="false"/>});
	</s:iterator>
	
	$(document).ready(function(){
		var t = $("#tree");
		t = $.fn.zTree.init(t, setting, zNodes);
		//setEdit();
		//$("#remove").bind("change", setEdit);
		//$("#rename").bind("change", setEdit);
		//对input框绑定事件
		//$("#removeTitle").bind("propertychange", setEdit)
		//.bind("input", setEdit);
		//$("#renameTitle").bind("propertychange", setEdit)
		//.bind("input", setEdit);
	});
	
	function treeAjaxReload(){
		$.post("${treeAjaxLink}",null,
		  function(data){
		  //alert(JSON.stringify(data.treeNodes));
		  	$("#tree").empty();
			$.fn.zTree.init($("#tree"), setting, data.treeNodes);
		  },"json");//这里返回的类型有：json,html,xml,text
	}
	//-->
	</script>
<style type="text/css">
.ztree {
	margin-top: 10px;
	border: 1px solid #617775;
	background: #F0F6E4;
	width: 220px;
	height: 360px;
	overflow-y: scroll;
	overflow-x: auto;
	border-image: initial;
}

.ztree li button.add {
	margin-left: 2px;
	margin-right: -1px;
	background-position: -144px 0;
	vertical-align: top;
	*vertical-align: middle
}
</style>
</head>
<body>
	<div class="mtitle">
		<h1>
			<s:property value="%{getText('treeNode.manager')}" />
		</h1>
		<!-- 
  <span> 跳转:
    <select class="fs_12" name="123">
      <option>所有频道</option>
    </select>
  </span>
   -->
	</div>

	<table align="left">
		<tr>
			<!-- style="BORDER-RIGHT: #999999 1px dashed" -->
			<td align="left" valign="top">
				<div class=""></div>
				<div class="treeContent" style="float: left">
					<ul id="tree" class="ztree"></ul>
				</div></td>
			<td width="770px" align="left" valign="top">
				<div class="treeForm">
					<iframe id="treeNodeFrame" frameborder="0" scrolling="AUTO"
						width="100%" height="600px" src=""></iframe>
				</div></td>
		</tr>
		<tr>
			<td><p>
					基本编辑按钮设置：<br /> <input type="checkbox" id="remove"
						class="checkbox first" checked /><span>显示删除按钮</span> <input
						type="checkbox" id="rename" class="checkbox " checked /><span>显示编辑按钮</span><br />
					remove 按钮的 title: <input type="text" id="removeTitle"
						value="remove" /><br /> rename 按钮的 title: <input type="text"
						id="renameTitle" value="rename" />
				<ul id="code" class="log" style="height: 85px;"></ul>
				</p>
			</td>
			<td></td>
		</tr>
	</table>
	<button onclick="treeAjaxReload()"></button>
</body>
</html>